<template>
  <b-layout id="history-results" class="history-results" :border="false" placement="top" space="120px" mode="vertical" :breadCrumb="true"
    v-loading="loading"
    :element-loading-text="loadingText"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.7)"
  >
    <div slot="first" class="filter-div">
      <new-law-filter
        @paramsChange="searchHandle"
      />
    </div>
    <b-layout
      space="60px"
      slot="last"
      placement="bottom"
    >
      <div class="el-table-div" slot="first">
        <el-table
          :data="tableData"
          height="100%"
          style="width: 100%">
          <el-table-column label="制度" prop="muster_name" min-width="100"/>
          <el-table-column
            label="对比法规"
            prop="law_names"
            min-width="300"
          >
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.law_names" :key="index">{{item}}</div>
            </template>
          </el-table-column>
          <el-table-column label="对比日期" prop="create_time" min-width="120" />
          <el-table-column
            label="对比结果"
            min-width="80"
          >
            <template slot-scope="scope">
              <span class="conflict" :class="scope.row.result ? (scope.row.result === 1 ? 'has' : '') : 'defeated'" @click="compareResultClick(scope.row)">
                {{getCompareResultText(scope.row)}}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <result-dialog ref="resultDialog"></result-dialog>
      </div>
      <div class="bottom" slot="last">
        <custom-paginator
          ref="paginator"
          :total="total"
          @pageChange="pageChangeHandle"
        />
      </div>
    </b-layout>
  </b-layout>
</template>

<script>
import BLayout from '@/layouts/BinaryLayout'
import newLawFilter from '../components/new-law-filter'
import customPaginator from '@/components/public/CustomPaginator'
import resultDialog from '../components/result-dialog'
export default {
  components: {
    BLayout,
    newLawFilter,
    customPaginator,
    resultDialog
  },
  data () {
    return {
      currentNodes: [],
      loading: false,
      loadingText: '加载中...',
      tableData: [],
      total: 0,
      searchParams: {
        keywords: '',
        compare_type: 2,
        start_time: '',
        end_time: '',
        page: 1,
        page_size: 10
      },
      contrastResult: [],
      timer: null,
      statusObj: {
        1: '创建未执行',
        2: '执行中',
        3: '执行成功',
        4: '执行失败'
      }
    }
  },
  watch: {
  },
  computed: {
  },
  mounted () {
    // this.compareHistory()
  },
  methods: {
    changeLoading (loading, loadingText = '加载中...') {
      this.loadingText = loadingText
      this.loading = loading
    },
    compareHistory (params) {
      this.changeLoading(true)
      this.$api.compareHistory(this.searchParams).then(res => {
        this.changeLoading(false)
        this.total = res.data.total
        this.tableData = res.data.data
        let paginator = this.$refs.paginator
        if (paginator) {
          paginator.updateTotal(res.data.total)
          paginator.updatePage(this.searchParams.page_size, this.searchParams.page)
        }
      }).catch(err => {
        this.changeLoading(false)
        console.error(err)
        this.$msgMnger.httpError(err)
      })
    },
    changeCurrentNodes (currentNodes) {
      this.currentNodes = currentNodes
    },
    searchHandle (e) {
      let date = e.date || []
      this.searchParams.keywords = e.input
      this.searchParams.start_time = date[0]
      this.searchParams.end_time = date[1]
      this.searchParams.page = 1
      this.$nextTick(() => {
        this.compareHistory()
      })
    },
    pageChangeHandle (e) {
      this.searchParams.page = e.page
      this.searchParams.page_size = e.pagesize
      this.$nextTick(() => {
        this.compareHistory()
      })
    },
    startCompareStatus (id) {
      if (!this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      this.changeLoading(true, '对比中，请等待...')
      this.timer = setInterval(() => {
        this.$api.compareStatus(id).then(res => {
          const status = res.data.status
          if (status === 3 || status === 4) {
            this.stopCompareStatus()
            this.changeLoading(false)
          }
          if (status === 3) {
            this.$msgMnger.success('对比成功')
            this.$refs.resultDialog.showDialog(id)
            this.compareHistory()
          }
          if (status === 4) {
            this.restartCompare(id, status)
          }
        }).catch(e => {
          this.stopCompareStatus()
          this.$msgMnger.httpError(e)
        })
      }, 3000)
    },
    stopCompareStatus () {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = null
    },
    restartCompare (id, status) {
      this.$confirm(`${this.statusObj[status]}，是否继续对比`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$api.restartCompare({ compare_id: id }).then(res => {
          if (res.code === 0) {
            this.startCompareStatus(id)
          } else {
            this.$msgMnger.httpError(res)
          }
        }).catch(e => {
          this.$msgMnger.httpError(e)
        })
      })
    },
    compareResultClick ({ id, status, result }) {
      if (result) {
        this.$refs.resultDialog.showDialog(id)
        return
      }
      if (status === 1 || status === 4) {
        this.restartCompare(id, status)
      }
    },
    getCompareResultText ({ status, result }) {
      if (result) {
        return result === 1 ? '冲突' : '无冲突'
      }
      return this.statusObj[status]
    }
  }
}
</script>

<style lang="scss" scoped>

.history-results{
  height: 100%;
  .filter-div{
    padding: 20px;
    margin: 20px 0 0 0;
    background: $box-bg-color;
  }
  .el-table-div{
    height: 100%;
    .el-table{
      border: none;
    }
    .conflict{
      cursor: pointer;
      padding: 0 2px 2px 2px;
      line-height: 1;
      display: inline-block;
      border-bottom: 1px solid #01BF7E;
      color: #01BF7E;
      &.has{
        border-color: #E9AA26;
        color: #E9AA26;
      }
    }
    .defeated{
      color: $sedondary-text-color;
      border-color: $sedondary-text-color;
    }
  }
  .bottom{
    background: $box-bg-color;
    height: 100%;
  }
}
</style>
